import React from 'react'
import {Link} from 'react-router-dom'
import {Layout, Menu} from "antd"
import Icon from '@ant-design/icons';
import {connect,} from 'react-redux'
import Logo from '../../../src/img/logo.png'
import LogoSmall from '../../../src/img/logo-s.png'

const SideMenu = (props) => {

    const type = props.type || 'dark'
    const menuSelected = props.pathname
    const sideCollapse = props.sideCollapse
    let menuOpened = []
    const splited = menuSelected.split('/')
    // 拼接各个层级计算打开的菜单
    if (splited.length > 1) {
        for (let i = 1; i < splited.length - 1; i++) {
            let path = `/${splited[1]}`
            for (let j = 2; j < i + 1; j++) {
                path += `/${splited[j]}`
            }
            menuOpened.push(path)
        }
    }

    const Sider = Layout.Sider
    const SubMenu = Menu.SubMenu

    const renderMenu = (data) => {
        if (data) {
            return data.map((item, index) => {
                if (item.children) {
                    return (
                        <SubMenu key={index} title={
                            <span>
                                {item.icon}
                                <span>{item.title}</span>
                            </span>
                        }>
                            {/* 递归渲染子菜单 */}
                            {renderMenu(item.children)}
                        </SubMenu>
                    )
                }

                return (
                    <Menu.Item key={index}>
                        <Link to={item.path}>
                            <span>
                                {item.icon}
                                <span>{item.title}</span>
                            </span>
                        </Link>
                    </Menu.Item>
                )
            })
        }
    }
    return (
        <Sider trigger={null} theme={type} collapsible collapsed={sideCollapse} className="app-sider">
            <div className="logo" style={{color: type === 'dark' ? '#ffffffa6' : ''}}>
                {sideCollapse ? <span>茶叶</span> : <span>茶叶管理后台</span>}
            </div>
            <Menu
                theme={type}
                style={{height: '50px'}}
                defaultOpenKeys={menuOpened}
                defaultSelectedKeys={[menuSelected]}
                selectedKeys={[menuSelected]}
                mode="inline"
            >
                {renderMenu(props.route)}
            </Menu>
        </Sider>
    )

}

export default SideMenu
